<template>
  <el-table :data="tableData">
    <el-table-column
      label="排名"
      prop="order"
      min-width="60px"
    />
    <el-table-column
      label="内容标题"
      prop="text"
      show-overflow-tooltip
      min-width="130px"
    />
    <el-table-column
      label="点击量"
      prop="touchAccount"
      min-width="90px"
    />
    <el-table-column
      label="日涨幅"
      prop="dayUp"
      sortable
      min-width="80px"
    />
  </el-table>
</template>

<script lang="ts">
import { defineComponent, watch, ref } from 'vue';

export default defineComponent({
  props: {
    searchType: {
      type: String,
      default: 'text',
    },
  },
  setup(props) {
    const tableData = ref<TypeObject[]>([]);
    const createTableData = () => {
      const result = [];
      const text = [
        '经济日报：财政政策要精准提升',
        '这是今日10点的南京',
        '立陶宛不断挑衅致经济受损民众',
        '韩国艺人刘在石确诊新冠',
        '关于北京冬奥会，文在寅表态',
        '95后现役军人荣立一等功',
        '双12遇冷，消费者厌倦了电商',
        '普高还是职高？家长们陷入选择',
        '人民快评：没想到“浓眉大眼”的',
        '杨涛接替陆慷出任外交部美大司',
        '图集：龙卷风袭击美国多州房屋',
        '52岁大姐贴钱照顾自闭症儿童八',
        '杭州一家三口公园宿营取暖中毒',
        '派出所副所长威胁市民？警方调',
        '新增内容尚未通过审核，详情请点击查看。'
      ];
      const touchAccount = [
        '346.3w+',
        '324.2w+',
        '318.9w+',
        '257.9w+',
        '124.2w+',
        '271.2w+',
        '352.2w+',
        '348.9w+',
        '318.9w+',
        '219.2w+',
        '138.2w+',
        '387.2w+',
        '279.9w+',
        '231.9w+',
        '189.2w+'
      ];
      const dayUp = [
        '5%',
        '17%',
        '12%',
        '2%',
        '15%',
        '9%',
        '16%',
        '4%',
        '21%',
        '4%',
        '12%',
        '8%',
        '20%',
        '8%',
        '6%'
      ];
      for (let i = 0; i < 10; i++) {
        result.push(
          {
            order: i + 1,
            text: text[parseInt(`${Math.random() * 10}`)],
            touchAccount: touchAccount[parseInt(`${Math.random() * 10}`)],
            dayUp: dayUp[parseInt(`${Math.random() * 10}`)],
          }
        );
      }

      return result;
    };
    watch(
      () => props.searchType,
      () => {
        tableData.value = createTableData();
      },
      {
        immediate: true,
      }
    );
    return {
      tableData,
    };
  },
});
</script>
